跳到主要内容

Canvas vs WebGL

背景​

JS/WASM运行时提供了多个发布在npm上的包。对于简单使用和更小的包体积，我们推荐从@rive-app/canvas开始（下面会详细介绍）。在Web端，Rive提供了使用与<canvas>元素关联的CanvasRenderingContext2D上下文或WebGL上下文来渲染Rive动画的能力。

注意：@rive-app/webgl和@rive-app/canvas包的高级API和在脚本中创建Rive实例的逻辑保持一致。这意味着如果你认为某个运行时包更适合你的使用场景，你只需要切换依赖，而不需要改变使用方式。请继续阅读下面关于JS/WASM不同运行时的介绍，以了解何时使用哪个包。

npm install @rive-app/canvas

一个易于使用的高级Rive API，使用CanvasRenderingContext2D渲染器作为后端。这使得Rive可以使用浏览器原生的高级矢量图形渲染器。该包的一些优点：

  • 下载体积小，无需额外的渲染器依赖
  • 支持Rive Text
  • 非常适合在屏幕上同时显示多个动画画布。当你想要在屏幕上渲染Rive动画的列表或网格时，这是理想的选择，因为浏览器对此没有上下文限制（与WebGL相比）
  • 支持简单的矢量图形动画和光栅图形
  • 自动请求Web Assembly（WASM）后端依赖

想要一个更小的Rive依赖，不需要所有的附加功能？可以考虑使用下面的@rive-app/canvas-lite 👇

@rive-app/canvas-lite​

npm install @rive-app/canvas-lite

这是一个比@rive-app/canvas更小的包，具有相同的API和CanvasRenderingContext2D后端，但为了尽可能保持包体积小，不会编译和构建某些WASM依赖。

如果你不需要以下功能，这个解决方案会更适合：

  • Rive Text
    • 如果你的Rive文件包含Rive Text组件，渲染图形时不会导致应用程序错误或停止渲染。Rive Text只是不会在图形中显示
    • 你仍然可以通过外部导入SVG文本的方式在图形中使用文本

@rive-app/webgl​

一个使用WebGL2上下文的易用高级Rive API。该包的一些优点：

  • 与编辑时体验保持最高保真度
  • 自动请求Web Assembly（WASM）后端依赖
  • 目前使用Skia进行渲染，但在未来的主要版本更新中将被新的Rive渲染器替代

关于WebGL的说明： 大多数浏览器会限制每个页面/域名的并发WebGL上下文数量。在使用Rive时，这意味着浏览器的限制会影响可创建的new Rive({...})实例数量。

如果你计划在同一页面上多次显示Rive内容（如列表/网格），你需要自行管理提供的上下文和canvas元素的生命周期。如果需要显示多个动画（如网格/列表），可以考虑使用@rive-app/canvas包（它使用CanvasRenderingContext2D渲染器且没有上下文限制），或者考虑使用@rive-app/webgl-advanced包，后者允许你在一个画布上显示多个Rive图形，并完全控制渲染循环。

建议在创建new Rive({...})对象时设置useOffscreenRenderer: true属性，特别是在页面上渲染多个Rive对象时。

@rive-app/webgl2​

这是使用WebGL2上下文的Rive渲染器的预览版本。在未来的主要版本更新中，这个包可能会被弃用，而@rive-app/webgl将完全使用Rive渲染器，不再需要额外的Skia依赖

一个使用WebGL2上下文的易用高级Rive API。该包的一些优点：

  • 与编辑时体验保持最高保真度
  • 自动请求Web Assembly（WASM）后端依赖
  • 使用新的Rive渲染器以获得最佳性能
  • 比@rive-app/webgl构建包更小，因为后者目前需要更大的Skia依赖

要体验Rive渲染器，你需要启用草案 WEBGL_shader_pixel_local_storage Chrome扩展（通过在上述链接中添加WebGL草案扩展），否则，在不支持该扩展的浏览器上，Rive将回退到MSAA解决方案（同样使用WebGL2）。目前主流浏览器正在努力使这个扩展默认支持。

关于WebGL的说明： 大多数浏览器会限制每个页面/域名的并发WebGL上下文数量。在使用Rive时，这意味着浏览器的限制会影响可创建的new Rive({...})实例数量。

如果你计划在同一页面上多次显示Rive内容（如列表/网格），你需要自行管理提供的上下文和canvas元素的生命周期。如果需要显示多个动画（如网格/列表），可以考虑使用@rive-app/canvas包（它使用CanvasRenderingContext2D渲染器且没有上下文限制），或者考虑使用@rive-app/webgl2-advanced包，后者允许你在一个画布上显示多个Rive图形，并完全控制渲染循环。

建议在创建new Rive({...})对象时设置useOffscreenRenderer: true属性，特别是在页面上渲染多个Rive对象时。

关于Rive渲染器的更多信息，请参阅选择渲染器章节。

@rive-app/webgl2-advanced​

这是使用WebGL2上下文的Rive渲染器的预览版本。在未来的主要版本更新中，这个包可能会被弃用，而@rive-app/webgl-advanced将完全使用Rive渲染器，不再需要额外的Skia依赖

一个使用WebGL2上下文的低级Rive API。它具有与常规@rive-app/webgl2包相同的优点，并且还有：

  • 完全控制更新和渲染循环
  • 允许在单个画布上渲染多个Rive图形
  • 使用新的Rive渲染器以获得最佳性能
  • 比@rive-app/webgl-advanced构建包更小，因为后者目前需要更大的Skia依赖
  • 允许更深层次地控制和操作Rive层次结构中的组件

要体验Rive渲染器，你需要启用WEBGL_shader_pixel_local_storage Chrome扩展，否则，在不支持该扩展的浏览器上，Rive将回退到MSAA解决方案（同样使用WebGL2）。目前主流浏览器正在努力使这个扩展默认支持。

这个包将是充分利用Rive渲染器性能的最佳方式，能够在一个画布上绘制大量Rive图形。

关于Rive渲染器的更多信息，请参阅选择渲染器章节。

@rive-app/canvas-advanced​

一个使用CanvasRenderingContext2D渲染器的低级Rive API。它具有与常规@rive-app/canvas包相同的优点，并且还有：

  • 完全控制更新和渲染循环
  • 允许在单个画布上渲染多个Rive画板
  • 允许更深层次地控制和操作Rive层次结构中的组件

查看使用示例：https://codesandbox.io/s/rive-canvas-advanced-api-basketball-rgted8

想要一个更小的Rive依赖，不需要所有的附加功能？可以考虑使用下面的@rive-app/canvas-advanced-lite 👇

@rive-app/canvas-advanced-lite​

npm install @rive-app/canvas-advanced-lite

这是一个比@rive-app/canvas-advanced更小的包，具有相同的API和CanvasRenderingContext2D后端，但为了尽可能保持包体积小，不会编译和构建某些WASM依赖。

如果你不需要以下功能，这个解决方案会更适合：

  • Rive Text
    • 如果你的Rive文件包含Rive Text组件，渲染图形时不会导致应用程序错误或停止渲染。Rive Text只是不会在图形中显示
    • 你仍然可以通过外部导入SVG文本的方式在图形中使用文本

@rive-app/webgl-advanced​

一个使用WebGL2上下文的低级Rive API。它具有与常规@rive-app/webgl包相同的优点，并且还有：

  • 完全控制更新和渲染循环
  • 允许在单个画布上渲染多个Rive图形
  • 允许更深层次地控制和操作Rive层次结构中的组件

查看使用示例：https://codesandbox.io/s/rive-webgl-advanced-api-fwtmdb

*-single 版本​

上述每个NPM包都包含rive.wasm文件。在高级API（@rive-app/canvas和@rive-app/webgl）中，运行时会自动为你请求这个文件，而不像它们的-advanced版本那样需要手动处理。我们在NPM上还提供了上述每个包的替代版本，这些版本将WASM编码到JS包中（不包括lite版本）。这意味着你不需要为支持Rive动画的WASM发起网络请求，因为所有内容都在一个主JS文件中。如果你的应用在从CDN加载WASM时遇到问题，这是一个很好的解决方案。

虽然这里不需要请求WASM，但JS包的体积会比上述包更大。非single版本在Web应用中可能有更好的缓存效果，因为如果从多个页面加载，WASM会从相同的CDN源加载。